<template>
  <div @click="hideMessageList">
    <!--    朋友圈头部开始-->
    <div style="position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 550px;
         height: 35px;line-height: 35px;font-size: 15px;z-index: 10;
         border-left: 1px solid #b8b7b7;border-right: 1px solid #b8b7b7;"
         :style="{'background-color': 'rgba(237,237,237,'+headerOpacity+')','color': headerColor}">
      <!--      朋友圈导航栏开始-->
      <el-row style="font-size: 16px;">
        <el-col :span="6">
          <el-badge :value="momentMsgSum" :hidden="momentMsgSum === 0 ? true : false">
            <i class="el-icon-bell" style="margin-left: 15px;cursor: pointer" title="消息" @click="readMessage" @click.stop></i>
          </el-badge>
          <i class="el-icon-refresh-right" style="margin-left: 10px;cursor: pointer" title="刷新" @click="refresh"></i>
        </el-col>
        <el-col :span="12" align="center">
          <span :style="{'opacity': headerOpacity}" style="font-size: 12px;">朋友圈</span>
        </el-col>
        <el-col :span="6" align="right">
          <i class="el-icon-camera" style="margin-right: 15px;cursor: pointer;" title="发朋友圈" @click="navigate('/home/moment/publish')"></i>
        </el-col>
      </el-row>
      <!--      朋友圈导航栏结束-->
      <!--      朋友圈消息栏开始-->
      <div style="position: fixed;top: 45px;left: -160px;width: 370px;height: 415px;
           border-radius: 5px;line-height: 20px;font-size: 15px;background-color: white;border: 1px solid #b8b7b7"
           id="message" v-if="messageVisible" @click.stop>
        <el-row style="margin-top: 20px;">
          <el-col :span="8" :offset="8" align="center"><span style="color: black">消息</span></el-col>
          <el-col :span="8" align="right">
            <span v-if="momentMsgArr.length !==0" @click="cleanMessageArr" style="font-size: 14px;color: #4e6086;margin-right: 20px;cursor: pointer">清空</span>
            <span v-else style="font-size: 14px;color: #9e9e9e;margin-right: 20px;">清空</span>
          </el-col>
        </el-row>
        <div v-if="momentMsgArr.length !== 0">
          <div v-if="message.read === 0" v-for="(message,i) in momentMsgArr" :key="i" @click="checkDetail(message.content.momentId)" class="message-item">
            <el-row style="padding: 10px 0;border-bottom: 1px solid #f3f3f3">
              <el-col :span="3" align="left"><img style="width: 35px;height: 35px" :src="message.content.avatar"></el-col>
              <el-col :span="18">
                <el-row>
                  <el-col :span="12" align="left"><span style="color: #7686cc;">{{message.content.comment}}</span></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" align="left"><span v-if="message.chatType === 111" style="color: black" class="comment-content" v-html="message.content.content"></span></el-col>
                  <el-col :span="24" align="left"><span v-if="message.chatType === 110" style="color: #6779a0;font-weight: 570;font-size: 18px" class="iconfont icon-thumbup"></span></el-col>
                </el-row>
              </el-col>
              <el-col :span="3" align="right">
                <img v-if="message.content.type === 0" style="width: 35px;height: 35px" :src="message.content.media">
                <video v-if="message.content.type === 1" style="width: 35px;height: 35px" :src="message.content.media" ></video>
              </el-col>
            </el-row>
          </div>
          <el-row v-if="momentMsgSum < momentMsgArr.length" style="margin-top: 20px;margin-bottom: 20px">
            <el-col :span="24" align="center"><span style="color: #9e9e9e;font-size: 13px">以下为已读消息</span></el-col>
          </el-row>
          <div v-if="message.read === 1" v-for="(message,i) in momentMsgArr" :key="i" @click="checkDetail(message.content.momentId)" class="message-item">
            <el-row style="padding: 10px 0;border-bottom: 1px solid #f3f3f3">
              <el-col :span="3" align="left"><img style="width: 35px;height: 35px" :src="message.content.avatar"></el-col>
              <el-col :span="18">
                <el-row>
                  <el-col :span="12" align="left"><span style="color: #7686cc;">{{message.content.comment}}</span></el-col>
                  <el-col :span="12" align="right"><span style="color: #9e9e9e;font-size: 13px;">{{dateFormat(message.content.date)}}</span></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" align="left"><span v-if="message.chatType === 111" style="color: black" class="comment-content" v-html="message.content.content"></span></el-col>
                  <el-col :span="24" align="left"><span v-if="message.chatType === 110" style="color: #6779a0;font-weight: 570;font-size: 18px" class="iconfont icon-thumbup"></span></el-col>
                </el-row>
              </el-col>
              <el-col :span="3" align="right">
                <img v-if="message.content.type === 0" style="width: 35px;height: 35px" :src="message.content.media">
                <video v-if="message.content.type === 1" style="width: 35px;height: 35px" :src="message.content.media" ></video>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-else style="height: 374px;line-height: 374px;font-size: 14px;color: #9e9e9e;text-align: center;">
          <span>暂无消息</span>
        </div>
      </div>
      <!--      朋友圈消息栏结束-->
    </div>
    <!--    朋友圈头部结束-->
    <div ref="moment" id="moment" v-on:scroll="handleScroll"
         style="position: fixed;top: 0;left: 50%;bottom: 0;transform: translateX(-50%);
         border-left: 1px solid #b8b7b7;border-right: 1px solid #b8b7b7;width: 550px;font-size: 15px;">
      <!--      朋友圈照片背景开始-->
      <div  :style="{'height':height+'px'}"
            style="position: relative;width: 100%;background-image: url('../static/moment_background.jpg');
            background-repeat: no-repeat;background-size: cover">
        <div style="position: absolute;bottom: -12px;right: 0;margin-right: 30px;">
          <span style="display: inline-block;margin-right: 30px;padding-top: 5px;color: white">{{currentUser.nickname}}</span>
<!--          <img style="width: 60px;height: 60px;vertical-align: top" :src="currentUser.avatar">-->
          <el-image
              style="width: 60px;height: 60px;vertical-align: top"
              :src="currentUser.avatarThumb"
              :preview-src-list="[currentUser.avatar]">
          </el-image>
        </div>
      </div>
      <!--      朋友圈照片背景结束-->
      <!--      朋友圈列表开始-->
      <div style="padding: 40px;" ref="list">
        <moment-item v-for="(moment, i) in momentArr" :moment="moment" :key="i" style="margin-bottom: 20px"></moment-item>
      </div>
      <!--      朋友圈列表结束-->
    </div>
  </div>
</template>
<script>
import MomentItem from './MomentItem'

export default {
  name: 'Moment',
  data () {
    return {
      headerOpacity: 0,
      headerColor: 'white',
      height: 331,
      content: '',
      messageVisible: false,
      momentArr: [],
      loading: true,
      currentUser: this.$store.state.currentUser,
      pageNum: 1,
      maxPage: 0,
      momentMsgArr: this.$store.state.momentMsgArr
    }
  },
  mounted () {
    this.getMomentList()
  },
  methods: {
    handleScroll (event) {
      console.log('gun le')
      const container = event.target
      // 滚动内容的总高度，包括在视口之外的部分
      let scrollHeight = container.scrollHeight
      // 滚动容器中内容顶部被隐藏的像素数
      let scrollTop = container.scrollTop
      // 滚动容器的可见高度，即滚动容器在视口中的高度
      let clientHeight = container.clientHeight

      // 顶部是否显示
      if (scrollTop >= this.height) {
        this.headerOpacity = 1
        this.headerColor = '#9e9e9e'
      } else {
        this.headerOpacity = 0
        this.headerColor = 'white'
      }

      // 滑到底部，加载数据
      if (scrollHeight - scrollTop === clientHeight) {
        if (this.pageNum < this.maxPage) {
          this.pageNum = this.pageNum + 1
          this.getMomentList()
        }
        console.log('已到底部')
      }
    },
    navigate (path) {
      this.$router.push(path)
    },
    checkDetail (id) {
      this.hideMessageList()
      this.$router.push({name: 'MomentDetail', params: {id}})
    },
    getMomentList () {
      // 发送获取朋友圈列表请求
      this.axios.get(`/api/v1/moment/list?userId=${this.currentUser.id}&pageNum=${this.pageNum}`).then((response) => {
        if (response.data.code === 1) {
          this.maxPage = response.data.data.maxPage
          let array1 = response.data.data.list
          this.momentArr = this.momentArr.concat(array1)
        } else {
          this.$message.error('服务器繁忙!')
          console.error(response.data.message)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    readMessage () {
      this.messageVisible = !this.messageVisible
      this.$store.commit('setMomentMsgSum', 0)
    },
    cleanMessageArr () {
      this.momentMsgArr = []
      this.$store.commit('setMomentMsgArr', this.momentMsgArr)
    },
    hideMessageList () {
      this.messageVisible = false
      for (let i = 0; i < this.momentMsgArr.length; i++) {
        if (this.momentMsgArr[i].read === 0) {
          this.momentMsgArr[i].read = 1
        }
      }
      this.$store.commit('setMomentMsgSum', 0)
      this.$store.commit('setMomentMsgArr', this.momentMsgArr)
    },
    refresh () {
      this.momentArr = []
      this.pageNum = 1
      this.getMomentList()
    },
    dateFormat (time) {
      let past = new Date(time)
      let pastDate = past.getDate()
      let pastMonth = past.getMonth()
      let pastYear = past.getFullYear()
      let pastHours = past.getHours()
      let pastMinutes = past.getMinutes()

      let now = new Date()
      let nowDate = now.getDate()
      let nowMonth = now.getMonth()
      let nowYear = now.getFullYear()
      let nowHours = now.getHours()
      let nowMinutes = now.getMinutes()

      let hours = past.getHours()
      let minutes = past.getMinutes() < 10 ? '0' + past.getMinutes() : past.getMinutes()

      if (pastYear === nowYear && pastMonth === nowMonth && nowDate === pastDate) {
        let remainder = nowHours - pastHours
        if (remainder === 0) {
          if (nowMinutes - pastMinutes === 0) {
            return '刚刚'
          } else {
            console.log('进来el1')
            return nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder === 1) {
          if (nowMinutes >= pastMinutes) {
            return remainder + '小时前'
          } else {
            return 60 + nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder > 1) {
          return remainder + '小时前'
        }
      } else if (pastYear === nowYear && pastMonth === nowMonth && (nowDate - pastDate) === 1) {
        return '昨天 '
      } else if (pastYear === nowYear && pastMonth === nowMonth &&
          (nowDate - pastDate) > 1 && (nowDate - pastDate) <= 7) {
        return nowDate - pastDate + '天前'
      } else if (pastYear === nowYear) {
        let month = pastMonth + 1
        return month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      } else {
        let month = pastMonth + 1
        return pastYear + '年' + month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      }
    }
  },
  components: {
    MomentItem
  },
  computed: {
    momentMsgSum () {
      return this.$store.state.momentMsgSum
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.comment-content img
  width 28px
  height 28px
  vertical-align middle
.el-badge__content.is-fixed
  top 5px
.message-item
  padding 0 10px
  &:hover
    background-color #ebebeb
#moment
  overflow-y auto
  &::-webkit-scrollbar
    display none
#message
  overflow-y auto
  &::-webkit-scrollbar
    display none
</style>
